<template>
  <div>
    <div v-if="$route.name != '登录'">
      <img src="@/assets/icon/topBG.png" class="headLogo" alt />
      <div class="operateShow">
        <el-switch
          v-model="$store.state.operateShow"
          active-text="显示操作"
          inactive-text="关闭操作"
        >
        </el-switch>
    <span @click="openDataPage" style="color: #409eff; margin-left: 10px; font-size: 20px">
          <i class="el-icon-s-data">数据大屏</i>
        </span>
      </div>
      <div class="setting" @click="visible = true">
        <i class="el-icon-setting" style="font-size: 20px"></i>
      </div>
      <div class="quit flex-center" @click="dialogVisible = true">
        <img src="@/assets/icon/exit.png" class alt />
        退出登录
      </div>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定退出用户吗</span>
      <span slot="footer" class="dialog-footer" style="z-index: 2100">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="exit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="'修改密码 (系统版本号：1.0.1)'"
      center
      :visible.sync="visible"
      :closeOnClickModal="false"
    >
      <el-form>
        <el-form-item label="原密码" :label-width="labelWidth" :required="true">
          <el-input
            v-model="inputModel.oldPassword"
            :ref="'oldPassword' + '_form'"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="labelWidth" :required="true">
          <el-input
            v-model="inputModel.newPassword"
            :ref="'newPassword' + '_form'"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="visible = false"> 取 消 </el-button>
        <el-button size="medium" type="primary" @click="updatePassword_user">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      dialogVisible: false,
      visible: false,
      inputModel: {},
      labelWidth: "100px",
    };
  },
  methods: {
	  openDataPage(){
      var ip = window.location.pathname
      console.log(ip)
		   window.open(ip+'#/dataScreen')
	  },
    updatePassword_user(row) {
      if (!this.inputModel.oldPassword) {
        this.$message.error("请补充原密码");
        this.$refs.oldPassword_form.focus();
        return;
      }
      if (!this.inputModel.newPassword) {
        this.$message.error("请补充新密码");
        this.$refs.newPassword_form.focus();
        return;
      }
      const params = {
        newPassword: this.inputModel.newPassword,
        oldPassword: this.inputModel.oldPassword,
      };
      this.$myApi.updatePassword_user(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.visible = false;
          this.exit();
        }
      });
    },
    message() {
      this.$router.push("/message");
    },
    exit() {
      localStorage.removeItem("userList");
      this.$router.push("/");
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
.setting {
  position: fixed;
  top: 40px;
  z-index: 1999;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  right: 120px;
}
.operateShow {
  position: fixed;
  top: 40px;
  z-index: 1999;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  left: 20px;
}
</style>